<template>
  <div id="chinatable" style="overflow:auto;height:505px;width:83vw;">
        <v-card-title
        >
        <span style="color:red">全国高风险地区</span>
        </v-card-title>
        <v-data-table
        :headers="headers"
        :items="highdatas"
        disable-sort=true
        class="table"
        hide-default-footer
        no-data-text="无高风险地区"
        >
        </v-data-table>

        <v-card-title>
            <span style="color:#f6a453">全国中风险地区</span>
        </v-card-title>
        <v-data-table
        :headers="headers"
        :items="datas"
        :sort-desc="[false,true]"
        class="table"
        hide-default-footer
        no-data-text="无中风险地区"
        >
        </v-data-table>
</div>
</template>

<script>
export default{
    name: 'TableChina',
    data(){
        return{
            headers:[{
                text: '序号',value: 'id'
            },{
                text: '省份',value: 'provinceName'
            },{
                text: '市区',value: 'cityName'
            },{
                text: '具体位置',value: 'areaName'
            }],
            datas:[
            ],
            highdatas:[
            ]
        }

    },
    mounted(){
            this.$api.overview.dangerCity().then(res=>{
            let result = res
            if(result.success){
                var length =Object.keys(result.data).length
                for(var i=0;i<length;i++){
                    if(result.data[i].dangerLevel===2)
                        this.datas.push(result.data[i])
                    else 
                        this.highdatas.push(result.data[i])
                }
                console.log(this.datas)
            }else{
                this.$Message.error("获取数据失败，原因："+ res.exc);
                }
            })
        }
    }
</script>

<style scoped>
#chinatable{
  width: 100%;
  height: 100%;
  background: transparent;
  border:solid 2px red;
  margin-top: 94px;
}
/deep/ .text-start{
    font-size: 24px !important;
}
/deep/ .v-card__title{
    font-size: 36px !important;
}
</style>